<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import AppHeader from '../components/AppHeader.vue'
import LeftSidebar from '../components/LeftSidebar.vue'
import MainContent from '../components/MainContent.vue'
import AppFooter from '../components/AppFooter.vue'

const searchUser = ref('')
const messages = ref([
  {
    id: 1,
    username: '111',
    content: '用户留言',
    messageImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    replyContent: '',
    replyImg: ''
  },
  {
    id: 2,
    username: '用户名8',
    content: '留言内容8',
    messageImg: '',
    replyContent: '回复内容8',
    replyImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: 3,
    username: '用户名7',
    content: '留言内容7',
    messageImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    replyContent: '回复内容7',
    replyImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: 4,
    username: '用户名6',
    content: '留言内容6',
    messageImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    replyContent: '回复内容6',
    replyImg: 'https://img2.baidu.com/it/u=1812956732,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  },
  {
    id: 5,
    username: '用户名5',
    content: '留言内容5',
    messageImg: '',
    replyContent: '回复内容5',
    replyImg: ''
  }
])

const filteredMessages = computed(() => {
  if (!searchUser.value) return messages.value
  return messages.value.filter(m => m.username.includes(searchUser.value))
})

function onSearch() {
  // 这里只做前端过滤
}
</script>

<template>
  <div class="holy-grail-container">
    <!-- 顶部横幅 -->
    <AppHeader 
      :search-user="searchUser"
      @update:search-user="searchUser = $event"
    />

    <!-- 圣杯布局主体 -->
    <div class="holy-grail-main">
      <!-- 左侧导航栏 -->
      <LeftSidebar />

      <!-- 主内容区 -->
      <router-view />

      <!-- 右侧边栏 -->
      <!-- <RightSidebar /> -->
    </div>

    <!-- 底部 -->
    <AppFooter />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #app {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.holy-grail-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f8fa;
}
.holy-grail-main {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  height: calc(100vh - 64px - 60px);
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar-left, .sidebar-right, .main-content {
  min-height: 0;
  min-width: 0;
}
@media (max-width: 992px) {
  .holy-grail-main {
    flex-direction: column;
    height: auto;
  }
}
</style> 